<!--
 * @Description: 
 * @Author: zzj
 * @Date: 2021-10-22 09:00:20
 * @LastEditors: zzj
 * @LastEditTime: 2021-10-25 19:31:36
-->
<template>
	<div class="category_list page_tem_1" v-loading="loading">
		<!-- 按钮 搜索表单 -->
		<div class="btns">
			<el-form size="small" inline :model="params">
				<el-form-item>
					<el-input v-model="params.name"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button icon="el-icon-search" type="primary" @click="loadCategories">搜索</el-button>
					<el-button @click="toAddHandler">添加</el-button>
				</el-form-item>
			</el-form>
		</div>
		<!-- /按钮 搜索表单 -->

		<!-- 数据 -->
		<div class="content">
			<el-table size="small" :data="categoryData.list">
				<el-table-column prop="id" label="栏目编号"></el-table-column>
				<el-table-column prop="name" label="名称">
					<template slot-scope="scope">
						<div class="icon_name">
							<div class="icon"><img :src="scope.row.icon" alt=""></div>
							<span class="name">	{{scope.row.name}} </span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="num" label="序号"></el-table-column>
				<el-table-column label="操作" width="100" align="center">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="editHandler(scope.row)">修改</el-button>
						<el-button type="text" size="small" @click="delHandler(scope.row)" style="color:#F56C6C">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- /数据 -->

		<!-- 分页 -->
		<div class="pages">
			<el-pagination
			small
			background
			layout="prev, pager, next"
			hide-on-single-page
			@current-change="pageChangeHandler"
			:page-size="categoryData.pageSize"
			:current-page="categoryData.page"
			:total="categoryData.total">
		</el-pagination>
		</div>
		<!-- /分页 -->

		<!-- 抽屉 -->
		<el-drawer
			size="50%"
			:title="title"
			:visible.sync="visible"
			@closed="clearValidate('pc_form')"
			>
			<div class="drawer__content" style="padding:0 1em">
				<el-form ref="pc_form" :rules="rules" label-width="60px" :model="form">
					<el-form-item label="名称" prop="name">
						<el-input v-model="form.name" size="small"></el-input>
					</el-form-item>
					<el-form-item label="序号" prop="num">
						<el-input v-model="form.num" size="small"></el-input>
					</el-form-item>
					<el-form-item label="图标">
						<el-upload
							class="avatar-uploader"
							:action="baseUrl +'/file/upload'"
							:show-file-list="false"
							list-type="picture-card"
							:on-success="handleUploadSuccess">
							<img v-if="form.icon" :src="form.icon" class="avatar">
							<i v-else class="el-icon-plus" ></i>
						</el-upload>
					</el-form-item>
					<el-form-item class="drawer__footer" style="text-align:right;margin-right:5%">
						<el-button type="primary" @click="submitHandler">提交</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-drawer>
		<!-- /抽屉 -->
	</div>
</template>

<script>
import {get,post} from "@/utils/request";
import _ from "lodash";
export default {
	data(){
		return {
			baseUrl:process.env.VUE_APP_BASE_API,   //接口基地址
			fileUrl:process.env.VUE_APP_FILE_BASE_URL,   //文件上传地址
      visible: false,
			loading:false,
			title:"添加产品分类信息",
			params:{    //参数表单  查询
					page:1,
					pageSize:4
			}, 	 
			form:{},			//表单，保存/更新
			categoryData:{},
			rules:{
				name:[{ required:true,message:"请输入分类名称",trigger:"blur" }],
				num:[{ required:true,message:"请输入分类序号",trigger:"blur" }]
			}
		}
	},
	mounted(){
		this.loadCategories();
	},
	methods:{
		// 获取栏目数据
		loadCategories(){   
			this.loading = true;
			let url = "/productCategory/pageQuery"
			get(url,this.params).then(resp =>{
					this.categoryData = resp.data;
			}).finally(()=>{
				this.loading = false;
			})
		},

		// 分页变动处理
		pageChangeHandler(page){
			this.params.page = page;
			this.loadCategories()
		},

		// 抽屉
			// 添加按钮
			toAddHandler(){
				this.form = {};
				this.title = "添加产品分类信息"
				this.visible = true;
			},
			// icon上传成功
			handleUploadSuccess(resp){
				if(resp.status === 200){
					let {id,groupName} = resp.data;
					// http://121.199.29.84:8888/group1/xxx.jpg
					let icon_url = this.fileUrl + groupName + "/" + id;
					// this.form.icon = icon_url;
					// this.form = _.cloneDeep(this.form)
					this.$set(this.form,"icon",icon_url)
				} else {
					this.$message({type:"error",message:resp.message})
				}
			},
			// 提交
			submitHandler(){
				this.$refs.pc_form.validate(valid =>{
					if(valid){
						let url = "/productCategory/saveOrUpdate"
						post(url,this.form).then(resp =>{
						this.$message.success(resp.message)
						this.visible = false;
						this.loadCategories();
					})
					}
				})
			},
			// 关闭抽屉清理遗留校验结果
			clearValidate(ref){
				this.$refs[ref].clearValidate();
			},

		//修改产品分类信息
		editHandler(row){
			this.title = "修改产品信息"
			this.form = _.cloneDeep(row);
			this.visible = true;
		},
		// 删除产品分类信息
		delHandler({id}){
			// 1.询问
			this.$confirm('此操作将永久删除该行数据, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(()=>{
				// 2.删除
				let url = "/productCategory/deleteById";
				get(url,{id}).then(resp =>{
					this.$message.success(resp.message)
					this.loadCategories();
				})
			})

			
		}
	}
}
</script>

<style lang="scss" scoped>
.category_list {
	.content{
		// 名称列设置
		.icon_name{
			display: flex;
			.icon {
				flex-basis: 30px;
				overflow: hidden;
				img {
					width: 100%;
				}
			}
			.name {
				flex: 1;
				font-size: 14px;
				padding:  .5em;
			}
		}
	}
}
</style>